import Vue from 'vue'
import Vuex from 'vuex'
// 导入安装好的 vuex持久化插件
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
// vuex 有一个缺点 只要页面刷新 数据就会回到初始化状态
// 想要vuex 刷新 数据不丢失 需要做持久化
// vuex-persistedstate
// 持久化插件的原理是 自动将vuex的数据存储到localStorage或sessionStorage中
export default new Vuex.Store({
  state: {
    token: "",//登录的标识
    count: 888,
    menuCollapsed: false,//菜单是否折叠
  },
  getters: {
    token: state => state.token,
    menuCollapsed: state => state.menuCollapsed
  },
  mutations: { //同步修改state的方法
    setToken (state, token) {
      state.token = token
    },
    setMenuColl (state, flag) { //设置菜单是否折叠
      state.menuCollapsed = flag
    }
  },
  actions: { //异步修改state的方法
    actToken ({ commit }, token) {
      commit('setToken', token)
    }
  },
  modules: {
  },
  // vuex 的plugins 插件数组
  plugins: [createPersistedState({
    storage: window.sessionStorage // 使用 sessionStorage 替代 localStorage
  })]
})
